<template>
  <div class=" sea-box">
    <header class="headersea">
      <van-nav-bar
      left-arrow
      @click-left="$router.back()">
        <template #left>
        </template>
        <template #title>
          {{id}}
        </template>
      </van-nav-bar>
    </header>
    <div class="content" ref="cont">
      <van-dropdown-menu>
        <van-dropdown-item v-model="value" :options="option" />
        <van-dropdown-item title="筛选" ref="item">
          <van-cell center title="请输入价格区间：">
            <input type="text" class="min" v-model="min">
            ~
            <input type="text" class="max" v-model="max">
          </van-cell>
          <div style="padding: 5px 16px;">
            <van-button type="danger" block round @click="onConfirm">
              确认
            </van-button>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
      <van-grid :border="true" :column-num="2" >
        <van-grid-item v-for="item in list" :key="item.proId" @click="fn(item.proId)">
          <van-image :src="item.mainImg" />
          <h4>{{item.proName}}</h4>
          <p>
            <van-tag type="danger">特卖价</van-tag>
            <span>{{item.price}}</span>
            <i>{{item.discount}}折</i>
          </p>
        </van-grid-item>
      </van-grid>
      <!-- 回到顶部组件 -->
      <van-icon name="back-top" v-show="flag" @click="toTop" class="top" />
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
// 引入vant中的各种组件
import { Image as VanImage, Card, Icon, NavBar, DropdownMenu, DropdownItem, Cell, Button, Grid, GridItem, Tag } from 'vant'
// 引入请求数据的方法模块
import { searchPro } from '../../api/index'

Vue.use(VanImage)
Vue.use(Card)
Vue.use(Icon)
Vue.use(NavBar)
Vue.use(DropdownMenu)
Vue.use(DropdownItem)
Vue.use(Cell)
Vue.use(Button)
Vue.use(Grid)
Vue.use(GridItem)
Vue.use(Tag)
// 配置各组件的变量和方法等
export default {
  data () {
    return {
      // 回到顶部按钮显示与隐藏的变量
      flag: true,
      searchList: [],
      value: 0,
      option: [
        { text: '价格排序', value: 0 },
        { text: '价格升序', value: 1 },
        { text: '价格降序', value: 2 }
      ],
      min: '',
      max: '',
      list: []
    }
  },
  props: ['id'],
  methods: {
    // 回到顶部单击事件的事件处理函数
    toTop () {
      this.$refs.cont.scrollTop = 0
    },
    fn (proId) {
      // $router.push编程式跳转的一种方法
      this.$router.push({ name: 'detail', params: { id: proId } })
    },
    onConfirm () {
      this.$refs.item.toggle()
      // 深拷贝
      // this.list = this.searchList.slice(0)
      // this.list = [...this.searchList]
      this.list = JSON.parse(JSON.stringify(this.searchList))
      if (this.min === '' && this.max !== '') {
        this.list = this.list.filter((val) => {
          return val.price <= this.max && val.price >= 0
        })
      } else if (this.max === '' && this.min !== '') {
        console.log(this.min, this.max)
        this.list = this.list.filter((val) => {
          return val.price <= 100000000 && val.price >= this.min
        })
      } else if (this.min === '' && this.max === '') {
        console.log(this.min, this.max)
        this.list = this.list.filter((val) => {
          return val.price <= 1000000000 && val.price >= 0
        })
      } else {
        this.list = this.list.filter((val) => {
          return val.price <= Math.max(this.min, this.max) && val.price >= Math.min(this.min, this.max)
        })
      }
    }
  },
  mounted () {
    // 钩子函数页面挂载后添加滚动事件处理函数，控制回到顶部按钮的显示与隐藏
     const that = this
          this.$refs.cont.addEventListener('scroll', () => {
            console.log(that.$refs.cont.scrollTop)
            if (this.$refs.cont.scrollTop > 500) {
              this.flag = true
            } else {
              this.flag = false
            }
          })
    searchPro({
      search: this.id
    }).then((res) => {
      this.searchList = [...res.data.data]
      this.list = [...this.searchList]
    })
  },
  watch: {
    value (a) {
      if (a === 1) {
        this.list.sort((a, b) => {
          return a.price - b.price
        })
      } else if (a === 2) {
        this.list.sort((a, b) => {
          return b.price - a.price
        })
      } else {
        this.list = [...this.searchList]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.sea-box ::v-deep .van-cell__title{
  flex: 0 0 1.2rem;
}
.sea-box{
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  .headersea{
    height: 0.46rem;
  }
  .content{
    flex: 1;
    overflow: auto;
    height: 100%;
      .top{
        position: fixed;
        bottom: 0.2rem;
        right: 0.2rem;
        font-size: 0.3rem;
        padding: 0.1rem;
        background: gainsboro;
        border: 1px solid #666;
        border-radius: 50%;
      }
      .van-cell__value{
        width: 65%;
        .min,.max{
          width: 0.8rem;
        }
      }
      h4{
        width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow:ellipsis;
      }
      p{
        padding:10px;
        span{
          padding: 5px;
        }
        i{
          font-size: 12px;
          padding-left: 5px;
        }
      }
  }
}

</style>
